<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        /*上标题*/
        .header1{
            width: 100%;
            height: 4rem;
        }
        .header{
            width: 100%;
            height: 4rem;
            line-height: 4rem;
            text-align: center;
            background: #36D9D6;
            font-size: 2.5rem;
            color: #ffffff;
            top: 0;
            left: 0;
            z-index: 1;
            position: fixed;
        }
        /*主要显示内容*/
        .nav>ul>a{
            margin-bottom: 1rem;
            display: block;
        }
        .nav>ul>a li{
            height: 15rem;
            width: 100%;
            background-size:100% ;
            position: relative;
        }

        .nav>ul>a:first-child>li{
            background: url("../../image/12.jpg") no-repeat ;
            background-size:100% ;
            position: relative;
        }
        .nav>ul>a:nth-child(2)>li{
            background: url("../../image/13.jpg") no-repeat ;
            background-size:100% ;
        }
        .nav>ul>a:nth-child(3)>li{
            background: url("../../image/14.jpg") no-repeat;
            background-size:100% ;
        }
        .nav>ul>a:nth-child(4)>li{
            background: url("../../image/15.jpg") no-repeat;
            background-size:100% ;
        }
        .article{
            color: #ffffff;
            font-size: .5rem;
            height: 1.5rem;
            width: 100%;
            background: rgba(0,0,0,0.5);
            position: absolute;
            bottom: 0;
            text-indent:1rem;
        }
        .time{
            position: absolute;
            right: 1rem;
        }


        .footerArea {
            width: 100%;
            float: left;
            background: #FFFFFF;
            border-top: 1px solid #C2C2C2;
            position: fixed;
            bottom: 0;
        }

        .footerArea>li {
            float: left;
            width: 25%;
            height: 6rem;
            line-height: 10rem;
            position: relative;
            font-size: 1.6rem;
            padding: 1rem 0;
            text-align: center;
        }

        .footerArea>li>img {
            width: 3rem;
            height: 3rem;
            position: absolute;
            left: 50%;
            transform: translate(-50%);
        }
        .hint{
            height: 1rem;
            width: 100%;
            text-align: center;
            line-height: 1rem;
            padding-bottom: 10rem;
            font-size: 1.5rem;
            color: #595B5D;
        }
    </style>
</head>
<body id="body">
<div class="header1">
    <header class="header">宝典</header>
</div>
<!--/*主要显示*/-->
<nav class="nav">
    <ul class="lis">
 </ul>
    <p class="hint">加载中...</p>
</nav>
<!--底部导航区域-->
	<!--底部导航区域-->
		<ul class="footerArea">
			<li pageTo="1"><img src="../../image/part-time1.png" />兼职</li>
			<li pageTo="2"><img src="../../image/bible2.png" />宝典</li>
			<li pageTo="3"><img src="../../image/msg1.png" />消息</li>
			<li pageTo="4"><img src="../../image/my1.png" />我的</li>
		</ul>

<script src="../../js/htmlFont.sizeRoot.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/public.js"></script>
<script src="../../js/treasury.js"></script>


</body>
</html>